<template>
	
	<view>
		<!-- 返回顶部 -->
		<view style="z-index: 10;">
			<u-back-top :scrollTop="backTop.scrollTop" :mode="backTop.mode" :bottom="backTop.bottom" :right="backTop.right" :top="backTop.top"
			 :icon="backTop.icon" :custom-style="backTop.customStyle" :icon-style="backTop.iconStyle" :tips="backTop.tips"></u-back-top>
		</view>
		<!-- 顶部导航栏 Start -->
		<u-sticky offset-top="0">
			<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</u-sticky>

		<!-- 轮播图 Start -->
		<!-- <u-swiper :list="swiperList" autoplay :title="true"  img-mode="scaleToFill" name="bannerPic" @click="handleClickSwiper"></u-swiper> -->
		<view class="swipe-wrapper">
			<swiper indicator-dots autoplay circular previous-margin="16px" next-margin="17px">
				<swiper-item class="swiper-item" v-for="(banner, index) in swiperList" :key="index" @click="handleClickSwiper(banner.jumpUrl)">
					<view class="swiper-item-image-wrapper">
						<image class="swiper-item-image" :src="banner.bannerPic" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 目标列表 Start -->
		<view class="containt">
			<navigator v-for="(goal, index) in releaseList" :key="index" :url="`/pages/insidePages/releaseDetails/index?from=home&userSignRecordId=${goal.userSignRecordId}`">
				<ReleaseCard :goalProp="goal" @like='handleClickLike' @userCenter='handleToUserCenter'></ReleaseCard>
			</navigator>
		</view>

		<!-- 加载完 -->
		<!-- <view v-show="pagination.totalCount >= releaseList.length" class="finished-loading">
			<u-divider>我是有底线的 凸^-^凸</u-divider>
		</view> -->

		<!-- 返回顶部 -->
		<view class="back-top">
			<u-back-top :scrollTop="backTop.scrollTop" :mode="backTop.mode" :bottom="backTop.bottom" :right="backTop.right" :top="backTop.top"
			 :icon="backTop.icon" :custom-style="backTop.customStyle" :icon-style="backTop.iconStyle" :tips="backTop.tips">
			</u-back-top>
		</view>

		<!-- 登录弹窗 -->
		<u-popup v-model="showLoginDialog" mode="center" width="500rpx">
			<view class="popup-wrapper">
				<view class="tip">
					<view>您凭证已过期或未登录</view>
					<view>请登录</view>
				</view>
				
				<u-button type="primary" :loading="isLogin" open-type="getUserInfo" @getuserinfo="handleLogin">登录</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import loginMixin from '@/utils/loginMixin.js'
	import ReleaseCard from '@/components/ReleaseCard/index.vue'
	import {
		clickLike
	} from '@/api/goal.js'
	import {
		getBannerList,
		getSignListAll
	} from '@/api/home.js'

	export default {

		mixins: [loginMixin],

		components: {
			ReleaseCard
		},

		data() {
			return {
				showLoginDialog: false, // 显示登陆弹窗
				current: 0, // 当前顶部导航栏
				swiperList: [], // 轮播图列表
				releaseList: [], // 目标列表
				isloading: false, // 加载loading
				pagination: { // 分页参数
					startIndex: 0,
					length: 15,
					totalCount: 0,
				},
				backTop: { // 返回顶部配置
					scrollTop: 0,
					mode: 'circle',
					bottom: 40,
					right: 40,
					top: 400,
					icon: 'arrow-upward',
					tips: '',
					customStyle: {},
					iconStyle: {
						color: '#909399',
						fontSize: '38rpx'
					}
				},
				tabsList: [{ // 顶部菜单
					name: '推荐'
				}, {
					name: '定目标'
				}, {
					name: '搜索'
				}, ] // 顶部导航栏
			}
		},

		// onShow() {
		// 	this.init()
		// },

		async onLoad() {
			this.init()
		},

		// 监听滚动条
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},

		// 上拉加载
		onReachBottom() {
			this.handleLoadMore()
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.init()
		},

		methods: {
			init() {
				this.releaseList = []
				this.pagination.startIndex = 0
				this.handleGetBannerList()
				this.handleGetSignListAll()
			},

			// 获取轮播图
			async handleGetBannerList() {
				const {
					resultData
				} = await getBannerList()
				this.swiperList = resultData.list
			},

			// 获取目标列表
			async handleGetSignListAll() {
				if (this.isloading) return
				try {
					this.isloading = true
					const data = JSON.stringify(Object.assign(this.pagination, {
						currentUserOpenId: this.user && this.user.openId || ''
					}))
					uni.showLoading({
					    title: '加载中'
					});
					const {
						resultData
					} = await getSignListAll({
						data
					})
					this.releaseList = [...this.releaseList, ...resultData.list]
					this.pagination.totalCount = resultData.totalCount
					this.isloading = false
					uni.stopPullDownRefresh()
					uni.hideLoading()
				} catch (e) {
					//TODO handle the exception
					this.isloading = false
					uni.hideLoading()
				}
			},

			// 顶部导航点击
			change(index) {
				if (index === 1) {
					uni.navigateTo({
						url: "/pages/insidePages/setGoals/index"
					})
				} else if (index === 2) {
					uni.navigateTo({
						url: "/pages/insidePages/search/index"
					})
				}
			},

			// 点击轮播图
			handleClickSwiper(url) {
				console.log(url)
				// const swiperTarget = this.swiperList[index]
				uni.navigateTo({
					url
				})
			},

			// 上拉加载更多
			handleLoadMore() {
				if (this.pagination.totalCount >= this.releaseList.length) return
				this.pagination.startIndex += 1
				this.handleGetSignListAll()
			},

			// 点击关注
			async handleClickLike(release) {
				if (!this.user.hasOwnProperty('openId')) {
					this.showLoginDialog = true
					return
				}
				try {
					const data = JSON.stringify({
						openId: this.user.openId,
						userSignRecordId: release.userSignRecordId
					})
					const res = await clickLike({
						data
					})

					if (release.userClick) {
						release.userClick = !release.userClick
						release.totalClickCount -= 1
					} else {
						release.userClick = !release.userClick
						release.totalClickCount += 1
					}

				} catch (e) {
					//TODO handle the exception
					if (e.resultCode === 701) {
						this.showLoginDialog = true
					}
				}
			},

			// 跳转用户中心
			handleToUserCenter(release) {
				// 点击的是自己的信息跳转个人中心
				if (this.user.openId === release.openId) {
					uni.switchTab({
						url: '/pages/mine/index'
					})
				} else {
					uni.navigateTo({
						url: `/pages/insidePages/userCenter/index?openId=${release.openId}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	
	.swiper-item {
		padding: 0 12rpx;
		box-sizing: border-box;
	}
	
	.swiper-item-image-wrapper {
		.iview_1011{
		height:320rpx;
		position:absolute;
		display:flex;
		border-radius:10rpx;
		flex-direction: row;
		width:660rpx;
		top:0rpx;
		background-color:green;
		}
	}
	
	.swiper-item-image {
		width: 100%;
		height: 320rpx;
	}
	
	.containt {
		margin: 40rpx auto;
	}

	.finished-loading {
		padding-bottom: 40rpx;
	}

	.popup-wrapper {
		padding: 24rpx 24rpx 40rpx;
		text-align: center;

		.tip {
			padding: 50rpx 0;
		}
	}
</style>
